{% load static %}

<!DOCTYPE html>
<html lang="en">

<head>

  {% include "includes/head.html" %}
  {% block extrastyle %}{% endblock extrastyle %}

</head>

<body id="main-container" hx-headers='{"X-CSRFToken": "{{ csrf_token }}"}' class="bg-gray-50 dark:bg-gray-800">

  {% block messages %}{% endblock messages %}

  {% block navigation %}
    {% include "includes/navigation.html" %}
  {% endblock navigation %}

  <div class="flex pt-16 overflow-hidden bg-gray-50 dark:bg-gray-900">

    {% block sidebar %}
      {% include "includes/sidebar.html" %}
    {% endblock sidebar %}

    <div class="fixed inset-0 z-10 hidden bg-gray-900/50 dark:bg-gray-900/90" id="sidebarBackdrop"></div>

    <div id="main-content" class="relative w-full h-full overflow-y-auto bg-gray-50 lg:ml-64 dark:bg-gray-900">
      <div id="page-content">
        {% block content %}{% endblock content %}
      </div>
      {% block footer %}
        {% include "includes/footer.html" %}
      {% endblock footer %}
      <p class="my-10 text-sm text-center text-gray-500">
        &copy; Django HTMX - Coded by <a href="https://app-generator.dev" class="hover:underline">App Generator</a>
      </p>

    </div>
  </div>


  {% include "includes/scripts.html" %}
  {% block extra_js %}{% endblock extra_js %}

</body>

</html>